<style>
	.downLoadText {
		color: #958fe9;
		border: 1px solid#958fe9;
		border-radius: 40px;
		padding: 6px 30px;
	}

	.chaxunButton {
		background: linear-gradient(to right, #488cf1, #3b45f4);
		padding: 6px 30px;
		color: #fff;
		margin-left: 20px;
		border-radius: 40px;
		cursor: pointer;
	}
</style>
<template>
	<div style="height: 100%;">

		<div style="padding: 10px;border-radius: 8px;border: 1px solid#f5f5f5;" class="displayFlexBet bgfff">
			<div>
				<el-select size="small" class="input-width mr10" v-model="params.entWasteId" placeholder="请选择危废"
					@change="search">
					<el-option v-for="(item,index) in entWasteList" :label="item.wasteCode + ' ' + item.wasteName"
						:value="item.entWasteId">
					</el-option>
				</el-select>

				<el-date-picker v-model="params.startTime" placeholder="开始时间" format="yyyy-MM-dd" value-format="yyyy-MM-dd"
					type="date" size="small" class="w130px">
				</el-date-picker>
				<el-date-picker v-model="params.endTime" placeholder="结束时间" format="yyyy-MM-dd" value-format="yyyy-MM-dd"
					type="date" size="small" class="ml10 w130px">
				</el-date-picker>

				<el-select size="small" class="input-width ml10" v-model="params.sourceId" filterable @change="$forceUpdate()">
					<el-option :label="item.sourceName" :value="item.id" v-for="(item,index) in sourceList">
					</el-option>
				</el-select>

				<el-button icon="el-icon-search" type="primary" @click="search()" size="small" class="ml10">查询</el-button>
			</div>


			<el-button icon="el-icon-download" type="primary" @click="downLoadExcle()" size="small"
				class="ml10">下载</el-button>
		</div>


		<div style="display: flex;background: #fff;padding: 10px;border-radius: 8px;margin-top: 10px;color: #999;">
			<div style="padding: 10px;cursor: pointer;" :class="[params.selectType == 0?'selectedClass':'']"
				@click="selectType(0)">
				产生台账</div>
			<div style="padding: 10px;cursor: pointer;" :class="[params.selectType == 1?'selectedClass':'']"
				@click="selectType(1)">
				入库台账</div>
			<div style="padding: 10px;cursor: pointer;" :class="[params.selectType == 2?'selectedClass':'']"
				@click="selectType(2)">
				出库台账</div>
			<div style="padding: 10px;cursor: pointer;" :class="[params.selectType == 3?'selectedClass':'']"
				@click="selectType(3)">
				自行处置利用台账</div>
			<div style="padding: 10px;cursor: pointer;" :class="[params.selectType == 4?'selectedClass':'']"
				@click="selectType(4)">
				委外利用处置台账</div>
		</div>

		<div style="background: #fff;padding: 10px;border-radius: 8px;margin-top: 10px;">
			<div v-if="params.selectType == 0">
				<el-table :data="tableData.list" style="width: 100%" size="mini" v-cloak>
					<el-table-column type="index" label="序号" width="50">
					</el-table-column>
					<el-table-column prop="produceCode" label="产生批次编码" width="190">
					</el-table-column>
					<el-table-column prop="produceTime" label="产生时间" width="120">
						<template slot-scope="scope" v-if="scope &&scope.row && scope.row.produceTime">
							<span>{{scope.row.produceTime.split(" ")[0]}}</span>
						</template>
					</el-table-column>
					<el-table-column label="危险废物名称">
						<el-table-column prop="wasteName" label="行业俗称" width="120">
						</el-table-column>
						<el-table-column prop="wasteName" label="国家危险废物名录名称" width="120">
						</el-table-column>
					</el-table-column>
					<el-table-column prop="wasteType" label="危险废物类别" width="100">
					</el-table-column>
					<el-table-column prop="wasteCode" label="危险废物代码" width="100">
					</el-table-column>
					<el-table-column prop="amount" label="产生量" width="150">
					</el-table-column>
					<el-table-column prop="unitValue" label="计量单位" width="100">
					</el-table-column>
					<el-table-column prop="tagCode" label="包装编号" width="150">
					</el-table-column>
					<el-table-column prop="packageTypeStr" label="包装类型" width="100">
					</el-table-column>
					<el-table-column prop="date" label="包装数量" width="50">
						<template>
							<span>1</span>
						</template>
					</el-table-column>
					<el-table-column prop="sourceCode" label="产生危险废物设施编号" width="150">
					</el-table-column>
					<el-table-column prop="operatorName" label="经办人" width="150">
					</el-table-column>
					<el-table-column prop="targetName" label="去向" width="150">
					</el-table-column>
				</el-table>
			</div>

			<div v-if="params.selectType == 1">
				<el-table :data="tableData.list" style="width: 100%" size="mini" v-cloak>
					<el-table-column type="index" label="序号" width="50">
					</el-table-column>
					<el-table-column prop="inStorageCode" label="入库批次编码" width="190">
					</el-table-column>
					<el-table-column prop="inStorageTime" label="入库时间" width="120">
						<template slot-scope="scope" v-if="scope &&scope.row && scope.row.inStorageTime">
							<span>{{scope.row.inStorageTime.split(" ")[0]}}</span>
						</template>
					</el-table-column>
					<el-table-column prop="tagCode" label="包装编号" width="150">
					</el-table-column>
					<el-table-column prop="packageTypeStr" label="包装类型" width="100">
					</el-table-column>
					<el-table-column prop="date" label="包装数量" width="50">
						<template slot-scope="scope">
							<span>1</span>
						</template>
					</el-table-column>
					<el-table-column label="危险废物名称">
						<el-table-column prop="wasteName" label="行业俗称" width="120">
						</el-table-column>
						<el-table-column prop="wasteName" label="国家危险废物名录名称" width="120">
						</el-table-column>
					</el-table-column>
					<el-table-column prop="wasteType" label="危险废物类别" width="100">
					</el-table-column>
					<el-table-column prop="wasteCode" label="危险废物代码" width="100">
					</el-table-column>
					<el-table-column prop="amount" label="入库量" width="150">
					</el-table-column>
					<el-table-column prop="unitValue" label="计量单位" width="100">
					</el-table-column>

					<el-table-column prop="storageNum" label="贮存设施编码" width="150">
					</el-table-column>
					<el-table-column prop="storeTypeStr" label="贮存设施类型" width="150">
					</el-table-column>
					<el-table-column prop="transferDepartment" label="运送部门经办人" width="150">
					</el-table-column>
					<el-table-column prop="warehouseDepartment" label="贮存部门经办人" width="150">
					</el-table-column>
					<el-table-column prop="produceCode" label="产生批次编码" width="150">
					</el-table-column>
				</el-table>
			</div>

			<div v-if="params.selectType == 2">
				<el-table :data="tableData.list" style="width: 100%" size="mini" v-cloak>
					<el-table-column type="index" label="序号" width="50">
					</el-table-column>
					<el-table-column prop="outStorageCode" label="出库批次编码" width="190">
					</el-table-column>
					<el-table-column prop="tagCode" label="包装编号" width="190">
					</el-table-column>
					<el-table-column prop="outStorageTime" label="出库时间" width="120">
						<template slot-scope="scope" v-if="scope &&scope.row && scope.row.outStorageTime">
							<span>{{scope.row.outStorageTime.split(" ")[0]}}</span>
						</template>
					</el-table-column>
					<el-table-column prop="packageTypeStr" label="包装类型" width="100">
					</el-table-column>
					<el-table-column prop="date" label="包装数量" width="50">
						<template slot-scope="scope">
							<span>1</span>
						</template>
					</el-table-column>
					<el-table-column label="危险废物名称">
						<el-table-column prop="wasteName" label="行业俗称" width="120">
						</el-table-column>
						<el-table-column prop="wasteName" label="国家危险废物名录名称" width="120">
						</el-table-column>
					</el-table-column>
					<el-table-column prop="wasteType" label="危险废物类别" width="100">
					</el-table-column>
					<el-table-column prop="wasteCode" label="危险废物代码" width="100">
					</el-table-column>
					<el-table-column prop="amount" label="入库量" width="150">
					</el-table-column>
					<el-table-column prop="unitValue" label="计量单位" width="100">
					</el-table-column>

					<el-table-column prop="storageNum" label="贮存设施编码" width="150">
					</el-table-column>
					<el-table-column prop="storeTypeStr" label="贮存设施类型" width="150">
					</el-table-column>
					<el-table-column prop="warehouseDepartment" label="出库部门经办人" width="150">
					</el-table-column>
					<el-table-column prop="transferDepartment" label="运送部门经办人" width="150">
					</el-table-column>

					<el-table-column prop="inStorageCode" label="入库批次编码" width="150">
					</el-table-column>
					<el-table-column prop="targetName" label="去向" width="150">
					</el-table-column>
				</el-table>
			</div>


			<div v-if="params.selectType == 3">
				<el-table :data="tableData.list" style="width: 100%" size="mini" v-cloak>
					<el-table-column type="index" label="序号" width="50">
					</el-table-column>
					<el-table-column prop="disposeCode" label="自行利用/处置批次编码" width="190">
					</el-table-column>
					<el-table-column prop="outEntTime" label="自行利用/处置时间" width="120">
						<template slot-scope="scope" v-if="scope &&scope.row && scope.row.outEntTime">
							<span>{{scope.row.outEntTime.split(" ")[0]}}</span>
						</template>
					</el-table-column>
					<el-table-column prop="tagCode" label="容器/包装编号" width="150">
					</el-table-column>
					<el-table-column prop="packageTypeStr" label="容器/包装类型" width="100">
					</el-table-column>
					<el-table-column prop="date" label="容器/包装数量" width="100">
						<template slot-scope="scope">
							<span>1</span>
						</template>
					</el-table-column>
					<el-table-column label="危险废物名称">
						<el-table-column prop="wasteName" label="行业俗称" width="120">
						</el-table-column>
						<el-table-column prop="wasteName" label="国家危险废物名录名称" width="120">
						</el-table-column>
					</el-table-column>
					<el-table-column prop="wasteType" label="危险废物类别" width="100">
					</el-table-column>
					<el-table-column prop="wasteCode" label="危险废物代码" width="100">
					</el-table-column>
					<el-table-column prop="amount" label="自行利用/处置量" width="150">
					</el-table-column>
					<el-table-column prop="unitValue" label="计量单位" width="100">
					</el-table-column>

					<el-table-column prop="targetName" label="自行利用/处置设施编码" width="150">
					</el-table-column>
					<el-table-column prop="disposeMethod" label="自行利用/处置类型方式" width="150">
					</el-table-column>
					<el-table-column prop="selfDisposeCompleteTime" label="自行利用/处置完毕时间" width="150">
					</el-table-column>
					<el-table-column prop="operatorName" label="自行利用/处置部门经办人" width="150">
					</el-table-column>
					<el-table-column prop="produceCode" label="产生批次编号/出库批次编码" width="150">
					</el-table-column>
				</el-table>
			</div>

			<div v-if="params.selectType == 4">
				<el-table :data="tableData.list" style="width: 100%" size="mini" v-cloak>
					<el-table-column type="index" label="序号" width="50">
					</el-table-column>
					<el-table-column prop="disposeCode" label="委外利用/处置批次编码" width="190">
					</el-table-column>
					<el-table-column prop="outEntTime" label="委外利用/处置时间" width="120">
						<template slot-scope="scope" v-if="scope && scope.row && scope.row.outEntTime">
							<span>{{scope.row.outEntTime.split(" ")[0]}}</span>
						</template>
					</el-table-column>
					<el-table-column prop="tagCode" label="容器/包装编号" width="150">
					</el-table-column>
					<el-table-column prop="packageTypeStr" label="容器/包装类型" width="100">
					</el-table-column>
					<el-table-column prop="date" label="容器/包装数量" width="100">
						<template slot-scope="scope">
							<span>1</span>
						</template>
					</el-table-column>
					<el-table-column label="危险废物名称">
						<el-table-column prop="wasteName" label="行业俗称" width="120">
						</el-table-column>
						<el-table-column prop="wasteName" label="国家危险废物名录名称" width="120">
						</el-table-column>
					</el-table-column>
					<el-table-column prop="wasteType" label="危险废物类别" width="100">
					</el-table-column>
					<el-table-column prop="wasteCode" label="危险废物代码" width="100">
					</el-table-column>
					<el-table-column prop="amount" label="委外利用/处置量" width="150">
					</el-table-column>
					<el-table-column prop="unitValue" label="计量单位" width="100">
					</el-table-column>
					<el-table-column prop="disposeMethod" label="委外利用/处置方式" width="150">
					</el-table-column>
					<el-table-column prop="disposeEntType" label="接受单位类型" width="150">
					</el-table-column>
					<el-table-column label="危险废物经营许可证持有单位">
						<el-table-column prop="targetName" label="单位名称" width="120">
						</el-table-column>
						<el-table-column prop="disposeEntLicenceNo" label="许可证编号" width="120">
						</el-table-column>
					</el-table-column>
					<el-table-column label="危险废物利用处置环节豁免管理单位">
						<el-table-column prop="outTargetName" label="单位名称" width="120">
						</el-table-column>
					</el-table-column>
					<el-table-column label="中华人民共和国境外的危险废物利用处置单位">
						<el-table-column prop="" label="单位名称" width="120">
						</el-table-column>
						<el-table-column prop="" label="出口核准通知单编号" width="120">
						</el-table-column>
					</el-table-column>
					<el-table-column prop="produceCode" label="产生批次编号/出库批次编码" width="150">
					</el-table-column>
				</el-table>
			</div>

			<div v-show="tableData.list&&tableData.list.length>0" align="right" style="margin-top: 10px">
				<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
					:current-page.sync="tableData.pageIndex" :page-sizes="[10,20,30,50]" :page-size="tableData.pageSize"
					layout="total, sizes, prev, pager, next, jumper" :total="tableData.total">
				</el-pagination>
			</div>
		</div>

	</div>
</template>

<script>
	import moment from 'moment'
	let that
	export default {
		components: {},
		data() {
			return {
				params: {
					facilitatorId: '',
					ticketId: '',
					selectType: 0,
					startTime: moment().startOf('month').format('YYYY-MM-DD'),
					endTime: moment().format('YYYY-MM-DD'),
					entWasteId: '',
					sourceId: ''
				},
				tableData: {
					total: 0,
					pageIndex: 1,
					pageSize: 20,
					list: []
				},
				entWasteList: [],
				sourceList: [],
			}
		},
		created: function() {},
		mounted: function() {
			that = this
			that.params.ticketId = that.$store.state.token
			that.getAllWasteByWasteTags()

			that.ajax({
				url: '/easyLabelStandBook/getWasteSourceList',
				data: {},
				success: function(data) {
					if (data.status == 1) {
						that.sourceList = data.data
					}
				}
			});
		},
		methods: {

			getAllWasteByWasteTags() {
				that.ajax({
					url: '/wasteTag/getAllWasteByWasteTags',
					data: {},
					success: function(data) {
						if (data.status == 1) {
							that.entWasteList = data.data;
							if (that.entWasteList.length > 0) {
								that.params.entWasteId = that.entWasteList[0].entWasteId
							}
							that.getTableData()
						}
					}
				});
			},

			//选择台账类型
			selectType(type) {
				that.params.selectType = -1

				setTimeout(function() {
					that.tableData.pageIndex = 1
					that.params.selectType = type
					that.getTableData()
				}, 500)

			},

			search() {
				that.tableData.pageIndex = 1
				that.getTableData()
			},

			handleSizeChange: function(val) {
				that.tableData.pageIndex = 1;
				that.tableData.pageSize = val;
				that.getTableData();
			},

			handleCurrentChange: function(val) {
				that.tableData.pageIndex = val;
				that.getTableData();
			},


			//下载表格
			downLoadExcle() {
				let apiName
				let appPath = "https://www.weifeibangbang.com/"
				//let appPath = "http://localhost:8080/"

				if (that.params.selectType == 0) {
					apiName = "/standBook/createProduceExcel"
				} else if (that.params.selectType == 1) {
					apiName = "/standBook/createInStorageExcel"
				} else if (that.params.selectType == 2) {
					apiName = "/standBook/createOutStorageExcel"
				} else if (that.params.selectType == 3) {
					apiName = "/standBook/createSelfDisposeStorageExcel"
				} else if (that.params.selectType == 4) {
					apiName = "/standBook/createDisposeStorageExcel"
				}
				apiName = apiName + '?ticketId=' + that.params.ticketId + "&entWasteId=" + that.params.entWasteId +
					"&facilitatorId=" + that.params.facilitatorId
				if (that.params.startTime) apiName = apiName + '&startTime=' + that.params.startTime
				if (that.params.endTime) apiName = apiName + '&endTime=' + that.params.endTime
				window.open(appPath + apiName)
			},

			getTableData() {
				let apiName
				if (that.params.selectType == 0) {
					apiName = "/standBook/pageDocumentProduceStandBook"
				} else if (that.params.selectType == 1) {
					apiName = "/standBook/pageDocumentInStorageStandBook"
				} else if (that.params.selectType == 2) {
					apiName = "/standBook/pageDocumentOutStorageStandBook"
				} else if (that.params.selectType == 3) {
					apiName = "/standBook/pageDocumentSelfDisposeStandBook"
				} else if (that.params.selectType == 4) {
					apiName = "/standBook/pageDocumentDisposeStandBook"
				}
				that.ajax({
					url: apiName + '?ticketId=' + that.params
						.ticketId + '&pageIndex=' + that.tableData.pageIndex + '&pageSize=' + that
						.tableData.pageSize,
					data: JSON.stringify(that.params),
					contentType: 'application/json',
					dataType: 'json',
					method: 'POST',
					success: function(result) {
						if (result.data) {
							that.tableData.list = result.data.records;
							that.tableData.total = result.data.total;
						}
					},
				})
			},

		}
	}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
	.selectedClass {
		color: #426ab3;
		font-weight: bold;
	}
</style>